<html>
    <head>
        <title>窗口动画</title>
    </head>
    <body>
        <script>
            // 窗口动画

                    /*
                        一、概述

                               （本API仅App支持。 小程序自身不支持自定义动画。H5的窗体动画可使用常规单页动画处理方案，
                               
                               见 H5下单页面动画示例：https://ext.dcloud.net.cn/plugin?id=659&tdsourcetag=s_pctim_aiomsg）


                               窗口的显示、关闭动画效果，支持在 API、组件、pages.json 中配置，优先级为：   API = 组件 > pages.json

                    */

                    /*
                        二、API

                                有效的路由API
                                    
                                        ①、navigateTo
                                        ②、navigateBack

                                        uni.navigateTo({
                                            url: '../test/test',
                                            animationType: 'pop-in',
                                            animationDuration: 200
                                        });

                                        uni.navigateBack({
                                            delta: 1,
                                            animationType: 'pop-out',
                                            animationDuration: 200
                                        });
                    */

                    /*
                        三、组件

                                open-type 有效值:

                                        ①、navigateTo

                                        ②、navigateBack

                                    eg:

                                        <navigator animation-type="pop-in" animation-duration="300" url="../test/test">navigator</navigator>
                                        <navigator animation-type="pop-out" animation-duration="300" open-type="navigateBack" >navigator</navigator>
                    */

                    /*
                        四、pages.json

                                 pages.json 中配置的是窗口显示的动画。

                                        "style": {
                                            "app-plus": {
                                                "animationType": "fade-in",
                                                "animationDuration": 300
                                            }
                                        }
                    */


                    /*
                        五、动画类型

                                 显示动画与关闭动画，会有默认的对应规则。如果通过API 或组件配置了窗口关闭的动画类型，则不会使用默认的类型。

                                 <1>、动画类型列表

                                                    显示动画	             关闭动画	            显示动画描述（关闭动画与之相反）

                                                ①、slide-in-right	     slide-out-right	    新窗体从右侧进入

                                                ②、slide-in-left	     slide-out-left	        新窗体从左侧进入

                                                ③、slide-in-top	         slide-out-top	        新窗体从顶部进入

                                                ④、slide-in-bottom	     slide-out-bottom	    新窗体从底部进入

                                                ⑤、pop-in	             pop-out	            新窗体从左侧进入，且老窗体被挤压而出

                                                ⑥、fade-in	             fade-out	            新窗体从透明到不透明逐渐显示

                                                ⑦、zoom-out	             zoom-in	            新窗体从小到大缩放显示

                                                ⑧、zoom-fade-out	     zoom-fade-in	        新窗体从小到大逐渐放大并且从透明到不透明逐渐显示
                                                
                                                ⑨、none	                 none	                无动画


                                    ★、详细的窗口动画说明，请参考：

                                                1、窗口显示的动画：AnimationTypeShow http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.AnimationTypeShow
                                                    
                                                2、窗口关闭的动画：AnimationTypeClose http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.AnimationTypeClose
                    */

                    /*
                        六、注意点

                                    1、纯nvue项目（render为native），窗体动画默认进入动画为popin，返回为pop-out。
                                        如果想修改动画类型，只能通过uni.navigateTo API修改，在组件或pages.json里配置动画类型无效
                                    
                                    2、非纯nvue项目，App端窗体动画，默认进入动画为slider-in-right，默认返回动画为pop-out
                                    
                                    3、webview 中嵌入 uni-app H5时，使用 uni.webView.navigateTo... 跳转页面
                    */
        </script>
    </body>
</html>